<template>
  <div class="home">
    <van-nav-bar title="理赔" @click-right="onClickRight">
      <!-- <van-icon name="search" slot="right" /> -->
    </van-nav-bar>
    <!-- <van-search
      v-model="value"
      :show-action="showAction"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      @focus="onFocus"
    /> -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <van-list v-model="loading" :finished="finished" :error.sync="error" error-text="请求失败，点击重新加载"
        finished-text="没有更多了" @load="onLoad">
        <div style="padding: 16px">
          <div style="background-color: #fff; margin-bottom: 4px" v-for="(item, index) in list" :key="index">
            <van-cell-group class="account-info">
              <!-- <van-cell :title="item.insureNum" value="" /> -->
              <van-cell title="保单号" :value="item.insureNum" />
              <van-cell title="货物名称" :value="item.frontReportInsure.goodsName" />
              <van-cell title="报案时间" :value="item.frontReportInsure.createTime" />
              <van-cell title="出险箱号" :value="item.frontReportInsure.containerNumber" />
              <van-cell title="损失金额" :value="item.frontReportInsure.lossFee" />
              <!-- <van-cell title="现场联系人" :value="item.frontReportInsure.sceneName" />
              <van-cell title="联系方式" :value="item.frontReportInsure.scenePhone" />
              <van-cell title="出险地址" :value="item.frontReportInsure.reportPlace" />
              <van-cell title="出险原因" :value="item.frontReportInsure.reportCause" />
              <van-cell title="损失情况说明" :value="item.frontReportInsure.explain" /> -->
              <!-- <van-cell title="报案状态" v-if="item.reportStatus == '3'" value="取消报案中" /> -->
              <!-- <van-cell title="当前节点" :value="getValue(ReportStatus, item.reportStatus)" />
              <van-cell title="已耗时" :value="item.goodsName" /> -->
            </van-cell-group>
            <div style="margin: 12px 0 12px 16px; padding-bottom: 12px">
              <van-button style="margin-right: 3px" type="primary" @click="view(item)"
                size="small">详情</van-button>
              <van-button style="margin-right: 3px" type="primary" @click="followingClick(item.orderNum)"
                size="small">跟踪</van-button>
              <!-- <van-button style="margin-right: 3px" type="primary" size="mini"
                @click="splitOrderClick">下载并分享</van-button> -->
              <van-button style="margin-right: 3px" :disabled="item.reportStatus == '7' || item.reportStatus == '3'" type="primary"
                size="small" @click="changeOrderClick(item)">{{ item.reportStatus == '7' ? '结案' : item.reportStatus == '3' ? '取消报案中' : '取消报案' }}</van-button>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

    <van-popup v-model="showFollowing" closeable position="left" :style="{ height: '100%' }">
      <van-steps style="padding-top:50px" direction="vertical" :active="reportStatus">
        <van-step v-for="(item, index) in stepList" :key="index">
          <h3>{{ item.label }}</h3>
          <p>{{ item.time }}</p>
        </van-step>
      </van-steps>
    </van-popup>

    <van-dialog v-model="showCancelReporting" title="确认取消?" @confirm="delConfirm" show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import { ReportStatus } from '@/utils/options'
import { getLabel } from "@/utils/func";
export default {
  name: "home",
  data() {
    return {
      reportStatus: 0,
      time: '',
      showFollowing: false,
      getLabel,
      ReportStatus,
      loading: false,
      finished: false,
      error: false,
      isLoading: true,
      pageNum: 1,
      pageSize: 5,
      list: [],
      value: "",
      showAction: false,
      show: false,
      showDel: false,
      result: ["a", "b"],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "二维码", icon: "qrcode" },
      ],
      stepList: [],
      showCancelReporting: false
    };
  },
  methods: {
    view(row) {
      this.$router.push({
        path: '/reportCase',
        query: {
          view: 1
        }
      })
      localStorage.setItem('reportCaseDetal', JSON.stringify(row))
    },
    followingClick(orderNum) {
      this.showFollowing = true
      this.$get("/warranty/insure/reportProcess", {
        orderNum
      }).then(res => {
        this.stepList = []
        res.data.forEach(item => {
          this.stepList.push({
            label: getLabel(ReportStatus, item.reportStatus),
            time: item.createTime
          })
        })
        this.reportStatus = res.data.length
      })
    },
    onLoad() {
      this.loading = true;
      this.$get("/warranty/insure/claim", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then((res) => {
          if (res && res.code * 1 === 200) {
            if (this.isLoading) {
              this.list = [];
              this.isLoading = false;
            }
            // 数据全部加载完成
            if (res.rows.length === 0 || this.list.length >= res.total) {
              this.finished = true;
            } else {
              // 将新加载的数据合并进列表数据中
              this.list = [...this.list, ...res.rows];
              this.pageNum++;
              this.loading = false;
            }
          } else {
            this.error = true;
          }
        })
        .catch((err) => {
          this.error = true;
        });
    },
    onRefresh() {
      this.pageNum = 1;
      this.finished = false;
      this.onLoad();
    },
    onClickRight() {
      this.$toast("按钮");
    },
    onSearch() {
      this.$toast(this.value);
    },
    onFocus() {
      this.showAction = true;
    },
    onCancel() {
      this.showAction = false;
    },
    splitOrderClick() {
      this.show = "true";
    },

    delConfirm() {
      this.$post("/warranty/insure/cancelreport", {
        orderNum: this.row.orderNum,
      }).then(() => {
        this.$toast({
          message: "取消成功",
          duration: 800,
        });
        this.showCancelReporting = false;
        window.location.reload();
      });
    },
    changeOrderClick(item) {
      this.row = item;
      this.showCancelReporting = true;
    },
    onSelect(option) {
      this.$toast(option.name);
      this.showShare = false;
    },
    shareClick() {
      this.showShare = true;
    },
    reportCaseClick() {
      this.showDel = true;
    },
    trackClick() {
      this.$router.push("/track");
    },
  },
};
</script>
<style scoped>
.home {
  background-color: #f5f5f5;
}

.title {
  margin: 1em;
  font-size: 1.5em;
}

.van-submit-bar {
  bottom: 16rem !important;
}
</style>
<!-- <style>
.van-step__title {
  margin-top:-4.6rem
}
</style> -->